
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>在线课程</title>
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	
	<link href="css/myClass.css" rel="stylesheet" type="text/css" />
	<link href="layer/need/layer.css" rel="stylesheet" type="text/css" />
</head>
<body>

<section class="aui-flexView">
	<header class="aui-navBar aui-navBar-fixed">
		<a href="javascript:;" class="aui-navBar-item">
			<select onchange="getData()" id="ketangtype" class="aui-border-none">
				<option value ="0">一年级</option>
				<option value ="1">二年级</option>
				<option value ="2">三年级</option>
				<option value ="3">四年级</option>
				<option value ="4">五年级</option>
				<option value ="5">六年级</option>
				<option value ="6">七年级</option>
				<option value ="7">八年级</option>
				<option value ="8">九年级</option>
			</select>
		</a>
		<div class="aui-center">
			<div class="aui-search-box">
				<i class="icon icon-search"></i>
				<input type="text" placeholder="搜索课程...." id="keyword" onblur="search()" autofocus="autofocus">
			</div>
		</div>
	</header>
	<section class="aui-scrollView">
		<div class="m-slider" id="classBanner" data-ydui-slider >
			<div class="slider-wrapper" >
				<div class="slider-item">
					<a href="javascript:;">
						<img src="images/banner.png" alt="">
					</a>
				</div>
				<div class="slider-item">
					<a href="javascript:;">
						<img src="images/banner.png" alt="">
					</a>
				</div>
				<div class="slider-item">
					<a href="javascript:;">
						<img src="images/banner.png" alt="">
					</a>
				</div>
				<div class="slider-item">
					<a href="javascript:;">
						<img src="images/banner.png" alt="">
					</a>
				</div>
				<div class="slider-item">
					<a href="javascript:;">
						<img src="images/banner.png" alt="">
					</a>
				</div>
			</div>
			<div class="slider-pagination"></div>
		</div>

		<div class="aui-tab" data-ydui-tab>
			<ul class="tab-nav b-line" id="classtype">
			
				<li class="tab-nav-item tab-active">
					<a href="javascript:;" onclick="getClass(1)">
						<span>教师课堂</span>
					</a>
				</li>
				<li class="tab-nav-item">
					<a href="javascript:;" onclick="getClass(2)">
						<span>跟课辅导</span>
					</a>
				</li>
				<li class="tab-nav-item">
					<a href="javascript:;" onclick="getClass(3)">
						<span>名师讲座</span>
					</a>
				</li>
				<li class="tab-nav-item" >
					<a href="javascript:;" onclick="getClass(4)">
						<span>专题讲座</span>
					</a>
				</li>
				<li class="tab-nav-item" >
					<a href="javascript:;" onclick="getClass(5)">
						<span>名家阅读</span>
					</a>
				</li>
			</ul>
			<div class="tab-panel">
				<div class="tab-panel-item tab-active" id="jskt">
					<a href="javascript:;" class="aui-flex b-line">
						<div class="aui-dev-img">
							<img src="images/ad-001.png" alt="">
						</div>
						<div class="aui-flex-box">
							<h2>心灵的畅想——梵高艺术沉浸式体验</h2>
							<h3> <i class="icon icon-time"></i>2019.09.22-2019.10.22 </h3>
							<h3> <i class="icon icon-ads"></i>北京 中国国家博物馆——心灵的畅想梵高的艺术沉浸式的北京北京北京</h3>
							<h4><em>￥</em>80~120   <i>自营</i></h4>
						</div>
					</a>
					<a href="javascript:;" class="aui-flex b-line">
						<div class="aui-dev-img">
							<img src="images/ad-002.png" alt="">
						</div>
						<div class="aui-flex-box">
							<h2>心灵的畅想——梵高艺术沉浸式体验</h2>
							<h3> <i class="icon icon-time"></i>2019.09.22-2019.10.22 </h3>
							<h3> <i class="icon icon-ads"></i>北京 中国国家博物馆——心灵的畅想梵高的艺术沉浸式的北京北京北京</h3>
							<h4><em>￥</em>80~120   <i>自营</i></h4>
						</div>
					</a>
					<a href="javascript:;" class="aui-flex b-line">
						<div class="aui-dev-img">
							<img src="images/ad-003.png" alt="">
						</div>
						<div class="aui-flex-box">
							<h2>心灵的畅想——梵高艺术沉浸式体验</h2>
							<h3> <i class="icon icon-time"></i>2019.09.22-2019.10.22 </h3>
							<h3> <i class="icon icon-ads"></i>北京 中国国家博物馆——心灵的畅想梵高的艺术沉浸式的北京北京北京</h3>
							<h4><em>￥</em>80~120   <i>自营</i></h4>
						</div>
					</a>
					<a href="javascript:;" class="aui-flex b-line">
						<div class="aui-dev-img">
							<img src="images/ad-004.png" alt="">
						</div>
						<div class="aui-flex-box">
							<h2>心灵的畅想——梵高艺术沉浸式体验</h2>
							<h3> <i class="icon icon-time"></i>2019.09.22-2019.10.22 </h3>
							<h3> <i class="icon icon-ads"></i>北京 中国国家博物馆——心灵的畅想梵高的艺术沉浸式的北京北京北京</h3>
							<h4><em>￥</em>80~120   <i>自营</i></h4>
						</div>
					</a>
					<a href="javascript:;" class="aui-flex b-line">
						<div class="aui-dev-img">
							<img src="images/ad-005.png" alt="">
						</div>
						<div class="aui-flex-box">
							<h2>心灵的畅想——梵高艺术沉浸式体验</h2>
							<h3> <i class="icon icon-time"></i>2019.09.22-2019.10.22 </h3>
							<h3> <i class="icon icon-ads"></i>北京 中国国家博物馆——心灵的畅想梵高的艺术沉浸式的北京北京北京</h3>
							<h4><em>￥</em>80~120   <i>自营</i></h4>
						</div>
					</a>
					<a href="javascript:;" class="aui-flex b-line">
						<div class="aui-dev-img">
							<img src="images/ad-006.png" alt="">
						</div>
						<div class="aui-flex-box">
							<h2>心灵的畅想——梵高艺术沉浸式体验</h2>
							<h3> <i class="icon icon-time"></i>2019.09.22-2019.10.22 </h3>
							<h3> <i class="icon icon-ads"></i>北京 中国国家博物馆——心灵的畅想梵高的艺术沉浸式的北京北京北京</h3>
							<h4><em>￥</em>80~120   <i>自营</i></h4>
						</div>
					</a>
					<a href="javascript:;" class="aui-flex b-line">
						<div class="aui-dev-img">
							<img src="images/ad-007.png" alt="">
						</div>
						<div class="aui-flex-box">
							<h2>心灵的畅想——梵高艺术沉浸式体验</h2>
							<h3> <i class="icon icon-time"></i>2019.09.22-2019.10.22 </h3>
							<h3> <i class="icon icon-ads"></i>北京 中国国家博物馆——心灵的畅想梵高的艺术沉浸式的北京北京北京</h3>
							<h4><em>￥</em>80~120   <i>自营</i></h4>
						</div>
					</a>
					<a href="javascript:;" class="aui-flex b-line">
						<div class="aui-dev-img">
							<img src="images/ad-008.png" alt="">
						</div>
						<div class="aui-flex-box">
							<h2>心灵的畅想——梵高艺术沉浸式体验</h2>
							<h3> <i class="icon icon-time"></i>2019.09.22-2019.10.22 </h3>
							<h3> <i class="icon icon-ads"></i>北京 中国国家博物馆——心灵的畅想梵高的艺术沉浸式的北京北京北京</h3>
							<h4><em>￥</em>80~120   <i>自营</i></h4>
						</div>
					</a>
					<a href="javascript:;" class="aui-flex b-line">
						<div class="aui-dev-img">
							<img src="images/ad-009.png" alt="">
						</div>
						<div class="aui-flex-box">
							<h2>心灵的畅想——梵高艺术沉浸式体验</h2>
							<h3> <i class="icon icon-time"></i>2019.09.22-2019.10.22 </h3>
							<h3> <i class="icon icon-ads"></i>北京 中国国家博物馆——心灵的畅想梵高的艺术沉浸式的北京北京北京</h3>
							<h4><em>￥</em>80~120   <i>自营</i></h4>
						</div>
					</a>
					<a href="javascript:;" class="aui-flex b-line">
						<div class="aui-dev-img">
							<img src="images/ad-010.png" alt="">
						</div>
						<div class="aui-flex-box">
							<h2>心灵的畅想——梵高艺术沉浸式体验</h2>
							<h3> <i class="icon icon-time"></i>2019.09.22-2019.10.22 </h3>
							<h3> <i class="icon icon-ads"></i>北京 中国国家博物馆——心灵的畅想梵高的艺术沉浸式的北京北京北京</h3>
							<h4><em>￥</em>80~120   <i>自营</i></h4>
						</div>
					</a>
					<a href="javascript:;" class="aui-flex b-line">
						<div class="aui-dev-img">
							<img src="images/ad-011.png" alt="">
						</div>
						<div class="aui-flex-box">
							<h2>心灵的畅想——梵高艺术沉浸式体验</h2>
							<h3> <i class="icon icon-time"></i>2019.09.22-2019.10.22 </h3>
							<h3> <i class="icon icon-ads"></i>北京 中国国家博物馆——心灵的畅想梵高的艺术沉浸式的北京北京北京</h3>
							<h4><em>￥</em>80~120   <i>自营</i></h4>
						</div>
					</a>
					<a href="javascript:;" class="aui-flex b-line">
						<div class="aui-dev-img">
							<img src="images/ad-012.png" alt="">
						</div>
						<div class="aui-flex-box">
							<h2>心灵的畅想——梵高艺术沉浸式体验</h2>
							<h3> <i class="icon icon-time"></i>2019.09.22-2019.10.22 </h3>
							<h3> <i class="icon icon-ads"></i>北京 中国国家博物馆——心灵的畅想梵高的艺术沉浸式的北京北京北京</h3>
							<h4><em>￥</em>80~120   <i>自营</i></h4>
						</div>
					</a>
				</div>
				<div class="tab-panel-item" id="gkfd">
					
				</div>
				<div class="tab-panel-item" id="msjz">
					
				</div>
				<div class="tab-panel-item" id="ztjz">
					
				</div>
				<div class="tab-panel-item" id="mjyd">
					
				</div>
			</div>
		</div>


	</section>

	<footer class="aui-footer aui-footer-fixed">
		<a href="index.html" class="aui-tabBar-item">
	        <span class="aui-tabBar-item-icon">
	            <i class="icon icon-loan"></i>
	        </span>
			<span class="aui-tabBar-item-text">首页</span>
		</a>
		<a href="myClass.html" class="aui-tabBar-item aui-tabBar-item-active">
	        <span class="aui-tabBar-item-icon">
	            <i class="icon icon-credit"></i>
	        </span>
			<span class="aui-tabBar-item-text">课程</span>
		</a>
		<a href="textList.html" class="aui-tabBar-item">
	        <span class="aui-tabBar-item-icon">
	            <i class="icon icon-ions"></i>
	        </span>
			<span class="aui-tabBar-item-text">投稿</span>
		</a>
		<a href="my.html" class="aui-tabBar-item">
	        <span class="aui-tabBar-item-icon">
	            <i class="icon icon-my"></i>
	        </span>
			<span class="aui-tabBar-item-text">我的</span>
		</a>
	</footer>
</section>
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript">
	var page=1;
	var baseurl = 'http://kt.zhangzhengjiang.top/api/';
	var static_url = 'http://kt.zhangzhengjiang.top/';
	$(function(){
		getBanner();
		getData();
	})
	function getBanner(){
		$.ajax({
			url:baseurl+'index/getClassBanner',
			type:'post',
			async:false,
			success:function(res){
				if(res.code == 1){
					var data = res.data;
					var data_html = '<div class="slider-wrapper" >';
					for (var i = 0; i < data.length; i++) {
						data_html+='<div class="slider-item">';
						 	data_html+='<a href="'+data[i].url+'">';
						 		data_html+='<img src="'+static_url+data[i].image+'" alt="">';
						 	data_html+='</a>';
						 data_html+='</div>';
					}
					data_html+='</div>';
					data_html+='<div class="slider-pagination"></div>';
					$('#classBanner').html(data_html);
				}else{
					layer.open({
						content: res.msg
						,skin: 'msg'
						,time: 2 ,//2秒后自动关闭
						
					});
				}
			}
		})
	}
	function search(){
		var keyword = $('#keyword').val();
		var id = window.localStorage.getItem('id_type');
		
		if(id == null || id ==''){
			id = 1;
		}
		var type = $('#ketangtype').val();
		getUrl(type,id,page,keyword);
	}
	function getData(){
		$('#jskt').html('');
		$('#gkfd').html('');
		$('#msjz').html('');
		$('#ztjz').html('');
		$('#mjyd').html('');
		var type = $('#ketangtype').val();
		getUrl(type,1,page,'');
	}
	function getClass(id){
		var type = $('#ketangtype').val();
		window.localStorage.setItem('id_type',id);
		getUrl(type,id,page,'');
	}
	function getUrl(type,ketangtype,page,keyword){
		layer.open({
		   type: 2
		   ,content: '正在加载...'
		 });
		 
		$.ajax({
			url:baseurl+'index/getClass',
			type:'post',
			data:{type:type,ketangtype:ketangtype,page:page,keyword:keyword},
			success:function(res){
				layer.closeAll();
				//return false;
				if(res.code == 1){
				  page++;
				  //轮播
				  var data = res.data;
				  var data_html = '';
				  if(data.length == 0){
						$('#jskt').html('');
						$('#gkfd').html('');
						$('#msjz').html('');
						$('#ztjz').html('');
						$('#mjyd').html('');
						if(ketangtype == 1){
							$('#jskt').append('<img src="./images/zwsj.png">');
						}else if(ketangtype == 2){
							$('#gkfd').append('<img src="./images/zwsj.png">');
						}else if(ketangtype == 3){
							$('#msjz').append('<img src="./images/zwsj.png">');
						}else if(ketangtype == 4){
							$('#ztjz').append('<img src="./images/zwsj.png">');
						}else{
							$('#mjyd').append('<img src="./images/zwsj.png">');
						}
						return false;
				  }
				  for (var i = 0; i < data.length; i++) {
					 data_html+='<a href="itemDetail.html?kid='+data[i].id+'" class="aui-flex b-line">';
					 	data_html+='<div class="aui-dev-img">';
					 		data_html+='<img src="'+static_url+data[i].images+'" alt="">';
					 	data_html+='</div>';
					 	data_html+='<div class="aui-flex-box">';
					 		data_html+='<h2>'+data[i].title+'</h2>';
					 		data_html+='<h3> <i class="icon icon-time"></i>购买数量:'+data[i].pay_num+'</h3>';
					 		data_html+='<h3> <i class="icon icon-ads"></i>'+data[i].content+'</h3>';
							if(data[i].price == 0.00){
								data_html+='<h4><em></em>限时免费<i>老师专属</i></h4>';
							}else{
								data_html+='<h4><em>￥</em>'+data[i].price+'<i>限时特惠</i></h4>';
							}
					 		
					 	data_html+='</div>';
					 data_html+='</a>';
				  }
				  
				  if(ketangtype == 1){
					  $('#jskt').html(data_html);
				  }else if(ketangtype == 2){
					  $('#gkfd').html(data_html);
				  }else if(ketangtype == 3){
					  $('#msjz').html(data_html);
				  }else if(ketangtype == 4){
					  $('#ztjz').html(data_html);
				  }else{
					  $('#mjyd').html(data_html);
				  }
				  
				  
				}else{
					layer.open({
						content: res.msg
						,skin: 'msg'
						,time: 2 ,//2秒后自动关闭
						
					});
				}
			}
		})
	}
</script>
</html>
